const compiler = require("vue-template-compiler");

// _c createElement
// createTextVNode
// _s = toString;
// with(this){return _c('p',[_v(_s(message))])}   执行完得到vnode
// h -> vnode
// _c / createElement -> vnode
// const template = `<p>{{message}}</p>`

// -----------------------------------------------------

// with(this){return _c('p',[_v(_s(flag ? message : 'no message found'))])}
// const template = `<p>{{flag ? message : 'no message found'}}</p>`

// -----------------------------------------------------

// 动态属性绑定
// const template = `
//   <div id="div1" class="container">
//     <img :src="imgUrl"/>
//   </div>
// `
// with (this) { return _c('div', { staticClass: "container", attrs: { "id": "div1" } }, [_c('img', { attrs: { "src": imgUrl } })]) }


// -----------------------------------------------------
// 条件
// const template = `
//   <div>
//     <p v-if="flag === 'a'">A</p>
//     <p v-else>B</p>
//   </div>
// `
// with(this){return _c('div',[(flag === 'a')?_c('p',[_v("A")]):_c('p',[_v("B")])])}

// -----------------------------------------------------
// 循环
// const template = `
//   <ul>
//     <li v-for="item in list" :key="item.id">{{item.title}}</li>
//   </ul>
// `
// with(this){return _c('ul',_l((list),function(item){return _c('li',{key:item.id},[_v(_s(item.title))])}),0)}

// -----------------------------------------------------
// 事件
// const template = `
//   <button @click="clickHandler">submit</button>
// `
// with(this){return _c('button',{on:{"click":clickHandler}},[_v("submit")])}

// -----------------------------------------------------
const template = `<input type="text" v-model="name">`
// with (this) { return _c('input', { directives: [{ name: "model", rawName: "v-model", value: (name), expression: "name" }], attrs: { "type": "text" }, domProps: { "value": (name) }, on: { "input": function ($event) { if ($event.target.composing) return; name = $event.target.value } } }) }

let res = compiler.compile(template)
console.log(res);
// res是有一个render函数，执行render函数，得到vnode。基于vnode就可以进行patch。
// console.log(res.render);
// console.log(typeof res.render);

console.log("-----------------");
// let fn = new Function("a", "b", "return a+b")
// console.log(fn(1, 2));

// let render = new Function(res.render)
// render();


// // 从 vue 源码中找到缩写函数的含义
// function installRenderHelpers (target) {
//     target._o = markOnce;
//     target._n = toNumber;
//     target._s = toString;
//     target._l = renderList;
//     target._t = renderSlot;
//     target._q = looseEqual;
//     target._i = looseIndexOf;
//     target._m = renderStatic;
//     target._f = resolveFilter;
//     target._k = checkKeyCodes;
//     target._b = bindObjectProps;
//     target._v = createTextVNode;
//     target._e = createEmptyVNode;
//     target._u = resolveScopedSlots;
//     target._g = bindObjectListeners;
//     target._d = bindDynamicKeys;
//     target._p = prependModifier;
// }